Welcome to Css!

11.12 绝对定位

绝对定位:position:absolute

1、 指定了绝对定位后,元素就是一个定位元素,完全脱离文档流;

2、 原来的位置不会保留;

3、 绝对定位是相对于最近有定位属性的父元素进行定位,如果往上没找到有定位元素的你父元素,才会相对于body元素进行定位。

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>css</title>

<style type="text/css">

.hhxs{width:400px;height:400px;border:3px solid purple;margin:50px auto;position:relative;}

.box{width:302px;height:302px;border:3px solid blue;margin:50px auto}

.pst1,.pst2,.pst3{width:100px;height:100px;color:white;font-size:30px;line-height:100px;text-align:center}

.pst1{background:green; }

.pst2{background:blue;

left:100px;

}

.pst3{background:orange;

position:absolute;

left:20px;

top:20px

}

</style>

</head>

<body>

<div class="hhxs">

<div class="box">

<div class="pst1">1</div>

<div class="pst2">2</div>

<div class="pst3">3</div>

</div>

</div>

</body>

</html>

返回值: